<template>
  <div>
    <div class="main_spac1" v-loading="loading">
      <!-- 日期选择 -->
      <div class="time_change">
        <change-date
          title="采购日期"
          @getdate="getdate"
          ref="time_change_ref"
          :options="date_select"
        ></change-date>
      </div>
      <!-- top -->
      <div class="collect">
        <div class="left">
          <div>
            <h3>{{ purchase_data.purchase_unit.order_num || 0 }}</h3>
            <p>采购单</p>
          </div>
          <div>
            <h3>{{ purchase_data.purchase_unit.purchase_class || 0 }}</h3>
            <p>商品（种）</p>
          </div>
          <div>
            <h3>
              {{
                purchase_data.purchase_unit.purchase_money
                  ? $toFixed(
                      parseFloat(purchase_data.purchase_unit.purchase_money)
                    )
                  : 0
              }}
            </h3>
            <p>采购金额</p>
          </div>
        </div>
        <div class="middle">
          <div>
            <h3>{{ purchase_data.purchase_unit.return_order_num || 0 }}</h3>
            <p>采购退货</p>
          </div>
          <div>
            <h3>{{ purchase_data.purchase_unit.return_class || 0 }}</h3>
            <p>商品（种）</p>
          </div>
          <div>
            <h3>
              {{
                purchase_data.purchase_unit.return_money
                  ? $toFixed(
                      parseFloat(purchase_data.purchase_unit.return_money)
                    )
                  : 0
              }}
            </h3>
            <p>退货金额</p>
          </div>
        </div>
        <div class="right">
          <div>
            <h3>
              {{
                purchase_data.purchase_unit.real_money
                  ? $toFixed(parseFloat(purchase_data.purchase_unit.real_money))
                  : 0
              }}
            </h3>
            <p>实采购金额</p>
          </div>
        </div>
      </div>
      <!-- 采购 -->
      <div class="purchase">
        <div class="left">
          <div class="common_title">
            <div>
              <p>采购曲线</p>
            </div>
            <div>
              <el-select
                v-model.trim="purchase_line_type"
                @change="(val) => typechange(val, 1)"
                size="mini"
                class="wid80"
              >
                <el-option
                  v-for="(item, index) in purchase_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 278px">
            <echart-line
              idname="purcahse_line"
              :datalist="chart_purchase_line"
            ></echart-line>
          </div>
        </div>
        <div class="right">
          <div class="common_title">
            <div>
              <p>采购方式占比</p>
            </div>
            <div>
              <el-select
                v-model.trim="purchase_percent_type"
                @change="(val) => typechange(val, 2)"
                size="mini"
                class="wid80"
              >
                <el-option
                  v-for="(item, index) in purchase_percent_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 278px">
            <echart-pie
              idname="purchase_percent"
              :datalist="chart_purchase_percent"
            ></echart-pie>
          </div>
        </div>
      </div>
      <!-- 排名 -->
      <div class="ranking">
        <div class="left">
          <div class="common_title">
            <div>
              <p>SKU TOP5</p>
            </div>
            <div>
              <el-select
                v-model.trim="sku_type"
                size="mini"
                @change="(val) => typechange(val, 3)"
                class="wid80"
              >
                <el-option
                  v-for="(item, index) in sku_user_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 236px">
            <echart-barsimple
              idname="sku_topbox"
              :datalist="chart_sku_top5"
            ></echart-barsimple>
          </div>
        </div>
        <div class="right">
          <div class="common_title">
            <div>
              <p>采购员\供应商 TOP5</p>
            </div>
            <div>
              <el-select
                v-model.trim="user_type"
                size="mini"
                @change="(val) => typechange(val, 4)"
                class="wid80"
              >
                <el-option
                  v-for="(item, index) in sku_user_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 236px">
            <echart-barsimple
              idname="purchase_user_ranking"
              :datalist="chart_user_top5"
            ></echart-barsimple>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeDate from "./components/changeDate.vue";
import EchartBarsimple from "./components/echartBarsimple.vue";
import EchartLine from "./components/echartLine.vue";
import EchartPie from "./components/echartPie.vue";

import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_purchase_chart } from "@/api/report/index";
export default {
  components: { changeDate, EchartBarsimple, EchartPie, EchartLine },
  data() {
    return {
      purchase_list: [
        {
          id: 1,
          name: "采购金额",
        },
        {
          id: 2,
          name: "退货金额",
        },
        {
          id: 3,
          name: "实采购金额",
        },
      ],
      sku_user_list: [
        {
          id: 1,
          name: "采购金额",
        },
        {
          id: 2,
          name: "采购数量",
        },
      ],
      purchase_percent_list: [
        {
          id: 1,
          name: "采购金额",
        },
        {
          id: 2,
          name: "商品（种）",
        },
      ],
      loading: true,
      purchase_line_type: 1,
      sku_type: 1,
      user_type: 1,
      purchase_percent_type: 1,

      cycledata: [
        {
          id: 1,
          name: "配送金额",
        },
        {
          id: 2,
          name: "半个月",
        },
        {
          id: 3,
          name: "一个月",
        },
      ],
      cycleid2: 1,
      // 时间
      date: "",
      date_type: 1,
      // 请求次数
      times: 1,
      // 总数据
      purchase_data: {
        purchase_unit: {},
      },
      // 采购曲线
      chart_purchase_line: {
        title: [],
        data: [],
        series: {
          name: "采购金额",
        },
      },
      // 各大类占比
      chart_purchase_percent: {
        data: [],
        series: {
          name: "采购金额",
        },
      },
      // skutop5
      chart_sku_top5: {
        title: [],
        data: [],
        series: {
          name: "采购金额",
        },
      },
      // 采购员
      chart_user_top5: {
        title: [],
        data: [],
        series: {
          name: "采购金额",
        },
      },
      date_select: [
        { label: "采购日期", option: 1 },
        { label: "创建日期", option: 2 },
      ],
    };
  },
  watch: {
    date() {
      this.loading = true;
      this.times += 1;
      this.get_purchase_chart();
    },
  },
  computed: {
    toFixedTwo(val) {
      return val.toFixed(2);
    },
  },
  methods: {
    // 获取数据
    get_purchase_chart() {
      let date = this.$refs["time_change_ref"].$data.date;
      let date_type = this.$refs["time_change_ref"].$data.type;
      let params = {
        start_time: date[0],
        end_time: date[1],
        date_type: date_type,
        // start_time: "2020-11-01",
        // end_time: "2020-12-25",
      };
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        params
      );
      this.chart_purchase_line.data = [];
      this.chart_purchase_line.title = [];
      this.chart_purchase_percent.data = [];
      this.chart_sku_top5.data = [];
      this.chart_sku_top5.title = [];
      this.chart_user_top5.data = [];
      this.chart_user_top5.title = [];

      get_purchase_chart(data).then((res) => {
        if (res.errcode == 0) {
          let response = res.data;
          this.purchase_data = response;
          // 曲线
          for (let key in response.purchase_data) {
            this.chart_purchase_line.title.push(
              response.purchase_data[key].date
            );
            this.chart_purchase_line.data.push(
              response.purchase_data[key].purchase_money
            );
          }

          // 采购方式占比
          for (let key in response.supply_rate) {
            var obj = {
              name: response.supply_rate[key].name,
              value: response.supply_rate[key].rate,
            };
            this.chart_purchase_percent.data.push(obj);
          }
          // sku_top
          if (response.goods_money && response.goods_money.length) {
            response.goods_money.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.purchase_money);
            });
          }
          //user
          if (response.supply_money && response.supply_money.length) {
            response.supply_money.map((item) => {
              this.chart_user_top5.title.push(item.name);
              this.chart_user_top5.data.push(
                parseFloat(item.purchase_money).toFixed(2)
              );
            });
          }
          this.loading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 类型选择
    typechange(val, type) {
      let response = this.purchase_data;
      switch (type) {
        case 1:
          // 曲线
          this.chart_purchase_line.data = [];
          this.chart_purchase_line.title = [];
          if (val == 1) {
            for (let key in response.purchase_data) {
              this.chart_purchase_line.title.push(
                response.purchase_data[key].date
              );
              this.chart_purchase_line.data.push(
                response.purchase_data[key].purchase_money
              );
            }
            this.chart_purchase_line.series.name = "采购金额";
          } else if (val == 2) {
            for (let key in response.purchase_data) {
              this.chart_purchase_line.title.push(
                response.purchase_data[key].date
              );
              this.chart_purchase_line.data.push(
                response.purchase_data[key].return_money
              );
            }
            this.chart_purchase_line.series.name = "退货金额";
          } else if (val == 3) {
            for (let key in response.purchase_data) {
              this.chart_purchase_line.title.push(
                response.purchase_data[key].date
              );
              this.chart_purchase_line.data.push(
                response.purchase_data[key].real_money
              );
            }
            this.chart_purchase_line.series.name = "实采购金额";
          }
          break;
        case 2:
          // 采购方式占比
          this.chart_purchase_percent.data = [];
          if (val == 1) {
            for (let key in response.supply_rate) {
              var obj = {
                name: response.supply_rate[key].name,
                value: response.supply_rate[key].rate,
              };
              this.chart_purchase_percent.data.push(obj);
            }
            this.chart_purchase_percent.series.name = "采购金额";
          } else if (val == 2) {
            for (let key in response.supply_rate) {
              var obj = {
                name: response.supply_rate[key].name,
                value: response.supply_rate[key].class_rate,
              };
              this.chart_purchase_percent.data.push(obj);
            }
            this.chart_purchase_percent.series.name = "商品（种）";
          }
          break;
        case 3:
          // skutop5
          this.chart_sku_top5.title = [];
          this.chart_sku_top5.data = [];
          if (val == 1) {
            response.goods_money.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.purchase_money);
            });
            this.chart_sku_top5.series.name = "采购金额";
          } else if (val == 2) {
            response.goods_num.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.purchase_num);
            });
            this.chart_sku_top5.series.name = "采购数量";
          }
          break;
        case 4:
          // 供应商
          this.chart_user_top5.title = [];
          this.chart_user_top5.data = [];
          if (val == 1) {
            response.supply_money.map((item) => {
              this.chart_user_top5.title.push(item.name);
              this.chart_user_top5.data.push(
                parseFloat(item.purchase_money).toFixed(2)
              );
            });
            this.chart_user_top5.series.name = "采购金额";
          } else if (val == 2) {
            response.supply_num.map((item) => {
              this.chart_user_top5.title.push(item.name);
              this.chart_user_top5.data.push(
                parseFloat(item.purchase_num).toFixed(2)
              );
            });
            this.chart_user_top5.series.name = "采购数量";
          }
          break;
      }
    },
    // 获取时间
    getdate(val) {
      this.date = val;
    },
  },
  mounted() {
    this.get_purchase_chart();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.time_change {
  background-color: #fff;
  width: 100%;
  height: 66px;
  border-bottom: 1px solid#EFF0F3;
}
.collect {
  height: 143px;
  width: 100%;
  background-color: #fff;
  padding: 14px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .left,
  .middle,
  .right {
    border: 1px solid #cbcbcb;
    height: 100%;
    padding: 15px 0;
  }
  .left,
  .middle,
  .right {
    flex: 42;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      h3 {
        color: #19b098;
        font-size: 24px;
        font-weight: 700;
        padding: 10px 0 12px 0;
        letter-spacing: 2px;
      }
      p {
        color: #8e8e8e;
        font-size: 14px;
        font-weight: 500;

        font-family: Microsoft YaHei;
        cursor: pointer;
      }
      &:nth-child(2) {
        border-left: 1px solid #cbcbcb;
        border-right: 1px solid #cbcbcb;
      }
    }
  }
  .middle {
    margin: 0 14px;
  }
  .right {
    flex: 16;
  }
}

/* 采购 */
.purchase {
  width: 100%;
  height: 328px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 15px;
  .left {
    flex: 6;
    height: 100%;
    background-color: #fff;
    margin-right: 15px;
  }
  .right {
    flex: 4;
    height: 100%;
    background-color: #fff;
  }
}
/* 排名 */
.ranking {
  width: 100%;
  height: 286px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 15px;
  .left {
    flex: 1;
    height: 100%;
    background-color: #fff;
    margin-right: 15px;
  }
  .right {
    flex: 1;
    height: 100%;
    background-color: #fff;
  }
}
.common_title {
  margin-top: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  div {
    padding: 0 20px;
    &:first-child {
      p {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #8e8e8e;
        cursor: pointer;
        span {
          padding-left: 25px;
        }
      }
    }
    &:last-child {
      /deep/.el-input__inner {
        border: none;
      }
      /deep/.wid80 .el-input__inner {
        width: 100px;
      }
    }
  }
}
</style>
